<template>
    <div class="select_class">
        <header >
            <a @click="$api.goBack()" class="back"></a>
            <span>意见反馈</span>
            <a class="add" @click="feedback()" >反馈记录</a>
        </header>
        <div class="main">
            <div class="flex">
                <div>姓名</div>
                <div class="red">*</div>
            </div>
            <div>{{useInfo.userName}}</div>
        </div>
        <div class="main">
            <div class="left">
                <div>联系电话</div>
            </div>
            <div>{{useInfo.phone}}</div>
        </div>
        <div class="main" @click="selectfeedtype()">
            <div class="flex">
                <div>反馈类型</div>
                <div class="red">*</div>
            </div>
            <div class="flex">
            <div style="padding-right:0.1333rem;"> {{detail.typename}} </div>
            <div class="more"></div></div>
        </div>
        <div class="textarea_wrap main">
            <textarea @change='changeValue' placeholder="请输入你的反馈意见" v-model="detail.backMessage" rows="4"></textarea>
         </div>
        <div class="main" style="justify-content:start">
            <div class="image_wrap" v-if="!img.flagDelete" v-for="(img,index) in detail.filePathList">
                <div @click="deleteImg(index)" class="deleteImg"></div>
                <img :src=$api.formatterImg(img.filePath) />
            </div>
            <div class="image_wrap" @click="AddPhoto()">
                <img src="../../static/images/other/add-img.png"/>
            </div>
        </div>
        <div class="row" style="padding:0.5rem;margin-top:0.6rem;">
            <mt-button style="width:100%;" type="danger" @click="subbmit()">提交</mt-button>
        </div>
        <getImage v-model='sheetVisible' ></getImage>
        <mt-actionsheet
            :actions="feedactions"
            v-model="feedtype">
        </mt-actionsheet>
    </div>
</template>
<script>
    import {
        MessageBox
    } from 'mint-ui';
    import getImage from '../components/getImage.vue'
    export default {
        data() {
            return {
                useInfo: '',
                detail: {
                    filePathList: [],
                    typename: '',
                    typeid: '',
                    backMessage: '',
                },
                cache: '',

                image_list: [],
                actions: [{
                    name: '拍照',
                    method: this.paizhao
                }, {
                    name: '从相册中选择',
                    method: this.selectImg
                }],
                sheetVisible: false,

                feedactions: [{
                    name: '使用异常',
                    id: 1,
                    method: this.selectType
                }, {
                    name: '意见反馈',
                    id: 2,
                    method: this.selectType
                }, {
                    name: '其他',
                    id: 3,
                    method: this.selectType
                }],
                feedtype: false,
            }
        },
        components: {
            getImage
        },
        created() {
            this.getUserInfo();
            this.getDetail();
            this.getImageBack();
        },
        methods: {
            getDetail() {
                let detail = JSON.parse(sessionStorage.getItem('detail'));
                if (detail) {
                    this.detail = detail;
                }

            },
            deleteImg(index) {
                this.detail.filePathList[index].flagDelete = 1;
                this.changeValue();
            },
            getImageBack() {
                var filepath = JSON.parse(sessionStorage.getItem('imgOption'));
                if (filepath) {
                    this.detail.filePathList.push(filepath);
                }
                sessionStorage.removeItem('imgOption');
                this.changeValue();
            },
            getUserInfo() {
                this.useInfo = JSON.parse(sessionStorage.getItem('useInfo'));
            },
            AddPhoto() {
                this.sheetVisible = true;
            },
            feedback() { //意见反馈
                this.$router.push({
                    'path': 'm7_1_1'
                })
            },
            changeValue() {
                sessionStorage.setItem('detail', JSON.stringify(this.detail));
            },
            selectfeedtype() {
                this.feedtype = true;
            },
            selectType(type) {
                this.detail.typename = type.name;
                this.detail.typeid = type.id;
                this.changeValue();
            },
            subbmit() { //提交
                var params = {
                    schoolId: this.useInfo.schoolId,
                    userId: this.useInfo.userId,
                    filePathList: JSON.stringify(this.detail.filePathList),
                    backType: this.detail.typeid,
                    backMessage: this.detail.backMessage,
                }
                if (!this.$check.empty(this.detail.typeid, '请选择反馈类型')) {
                    return false;
                };
                if (params.backMessage.length > 255) {
                    MessageBox('提示', '意见长度不要超过255!');
                    return false;
                }
                var url = "/feedback/add"
                this.$api.post(url, params, (data) => {
                    MessageBox('提示', '提交成功');
                    this.detail.typeid = '';
                    this.detail.typename = '';
                    this.$set(this.detail, 'filePathList', [])
                    this.detail.backMessage = '';
                    this.$api.clearItem();

                })
            }
        }
    }
</script>